<template>
    <button :class="type" class="h-[32px] px-[10px] text-[16px] rounded-[4px] select-none whitespace-nowrap flex items-center">
        <slot></slot>
    </button>
</template>

<script setup>
const { type } = defineProps({
    type:{
        type:String,
        default:'primary'
    }
})
</script>

<style lang="scss" scoped>
    .cancel { 
        background: #FFFFFF;
        border-radius: 2px;
        border: 1px solid #C3D0E3;
    }
    .primary{
        background: linear-gradient( 180deg, #247CFF 0%, #246CD8 100%);
        border-radius: 2px;
        color: white;
    }
    // [data-theme="dark"]{
        .default{
            border-radius: 2px;
            background: #FFFFFF;
            border: 1px solid #1269EB;
            color: #1269EB;
        }
    // }
</style>